<template>
    <view class="tabbar-box" :style="{'background-color': fenggeyanse =='light'? '#ffffff':'#0d0d0d'}">
        <view class="menu-list">
            <view class="item" :style="{color:selIdx==index?hoverColor:color}" v-for="(item,index) in list"
                @click="click(index)" :key="index">
                <view :class="{
                        big:index==bigIdx
                    }">
                    <view class="icon-box">
                        <image mode="aspectFit" :src="selIdx==index?item.selectedIconPath:item.iconPath" :style="{'background-color': fenggeyanse =='light'? '#ffffff':'#0d0d0d'}">
                        </image>
                    </view>
                </view>
                <text v-if="item.text">{{item.text}}{{index}}{{selIdx}}-{{defaultSel}}</text>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        props: {
            list: {
                type: [Array,Object],
                default: [{
                        "isTabBar":true,//是tabBar页面
                        "pagePath": "pages/index/index",
                        "iconPath": "/static/images/shouye.png",
                        "selectedIconPath": "/static/images/shouye2.png",
                        "text": "首页"
                    }, {
                        "pagePath": "pages/quan/quan",
                        "iconPath": "/static/images/quan.png",
                        "selectedIconPath": "/static/images/quan2.png",
                        "text": "圈子"
                    },
                    {
                        "pagePath": "/pages/fabu",
                        "iconPath": "/static/images/duanxin0.png",
                        "selectedIconPath": "/static/images/duanxin1.png",
                        "text": "发布"
                    },
                    {
                        "pagePath": "pages/xiaoxi/xiaoxi",
                        "iconPath": "/static/images/duanxin0.png",
                        "selectedIconPath": "/static/images/duanxin1.png",
                        "text": "消息"
                    }, {
                        "pagePath": "pages/wo/wo",
                        "iconPath": "/static/images/wo.png",
                        "selectedIconPath": "/static/images/wo2.png",
                        "text": "我的"
                    }
                ]
            },//菜单配置
            defaultSel: {
                type: Number,
                default: 0
            },//默认选中菜单
            hoverColor: {
                type: String,
                default: "#000000"
            },//选中颜色
            color: {
                type: String,
                default: "#666666"
            },//默认颜色
            bigIdx: {
                type: Number,
                default: -1
            },//大图标显示菜单-1为未开启
			//背景颜色
			fenggeyanse: {
				type: [String, Number],
				default: ''
			}
        },
        data() {
            return {
                selIdx: -1
            }
        },
        mounted() {
            this.selIdx = this.defaultSel;
        },
        methods: {
            click(idx) {
				
                this.selIdx = idx;
				
                this.$emit("clickTab", idx)
				this.$emit('update:tabBarIdx', idx);
				
            }
        }
    }
</script>

<style lang="scss">
    .tabbar-box {
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 999;
        width: 100%;
        height: 100rpx;
        display: flex;
        align-items: center;
        box-shadow: 0rpx 0rpx 12rpx rgba(0, 0, 0, 0.2);
    }

    .menu-list {
        display: flex;
        justify-content: space-around;
        text-align: center;
        font-size: 28rpx;
        width: 100%;
        height: 100rpx;
        align-items: center;

        .item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 100rpx;
            box-sizing: border-box;

            height: 80rpx;
            font-size: 22rpx;
            color: #757575;

            image {
                width: 40rpx;
                height: 40rpx;
            }

            .icon-box {
                width: 40rpx;
                height: 40rpx;
                text-align: center;
                display: flex;
                justify-content: space-around;
                position: relative;
            }

            .big {
                .icon-box {
                    image {
                        width: 120rpx;
                        height: 120rpx;
                        position: absolute;
                        top: -40rpx;
                        
                        border-radius: 50%;
                    }
                }
            }
        }



    }
</style>
